<template>
  <div>
    <div class="course_title">
      <i class="el-icon-menu"></i>
      <div>课程列表</div>
    </div>
    <el-table stripe
              border
              :data="courseList">
      <el-table-column label="课程名称"
                       prop="Cname">
      </el-table-column>
      <el-table-column label="课程代码"
                       prop="Cnumber">

      </el-table-column>
      <el-table-column label="在学人数"
                       prop="onlineUser">

      </el-table-column>
      <el-table-column label="所属分类">
        <template slot-scope="scope">
          <div>
            {{scope.row.CategoryOne}}/ {{scope.row.CategoryTwo}}/ {{scope.row.CategoryThree}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="编辑日期">
        <template slot-scope="scope">
          <div>
            {{new Date(scope.row.createAt).toLocaleString()}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div>
            <el-link :type='scope.row.isState==1? "primary": (scope.row.isState==2?"success":"danger")'>{{scope.row.isState==1? "草稿": (scope.row.isState==2?"已上架":"已下架")}}</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-link type="success"
                     @click="editCourse(scope.row._id,scope.row.ID)">编辑</el-link>
            <el-link @click="del(scope.row._id)"
                     type="danger">删除</el-link>
            <el-link @click="updown(scope.row.ID)"
                     :type='scope.row.isState==1? "primary": (scope.row.isState==2?"success":"danger")'>
              {{scope.row.isState==1? "上架": (scope.row.isState==2?"下架":"上架")}}
            </el-link>
            <el-link @click="topCou(scope.row.ID)"
                     :type='scope.row.isTop?"danger":"success"'>{{scope.row.isTop?"取消置顶":"置顶"}}</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="count"
                   :page-size="pageSize"
                   background
                   layout="prev,pager,next"
                   @current-change="pageChange">
    </el-pagination>
  </div>
</template>
<script>
import { upAndDown, delCourse, topCourse } from '../../api/course'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Ljfvue2011Coursetable',

  data () {
    return {
    };
  },
  mounted () {

  },
  computed: {
    ...mapState("CourseStore", ["pageStart", "count", "pageSize", "courseList", "searchText", "CategoryOne", "CategoryTwo", "CategoryThree"])
  },
  created () {
    // 进入页面首次加载
    // 调用vuex的actions
    this.getListApi({
      pageStart: this.pageStart
    })
  },
  methods: {
    ...mapActions("CourseStore", ["getListApi"]),
    async topCou (ID) {//置顶课程
      var res = await topCourse(ID)
      console.log(res)
      this.$message({
        message: "修改成功",
        type: "success"
      })
      // 调用vuex中的actions 刷新列表
      this.getListApi({
        pageStart: this.pageStart
      })
    },
    editCourse (_id, ID) { //点击课程编辑 跳转课程添加页面
      this.$router.push({ name: "courseadd", query: { _cid: _id, CDid: ID, action: "update" } })
      this.$store.commit("changedefAct", "课程添加")
    },
    async updown (ID) { //课程上架下架
      console.log(111)
      var res = await upAndDown(ID)
      console.log(res)
      this.getListApi({
        pageStart: this.pageStart
      })
    },
    async del (_id) { //删除课程
      var res = await delCourse(_id);
      console.log(res)
      // 调用vuex中的actions 刷新列表
      this.getListApi({
        pageStart: this.pageStart
      })
    },
    pageChange (val) {
      // val 当前页码
      this.$store.commit("CourseStore/changePage", val)
      this.getListApi({
        pageStart: this.pageStart
      })
    }
  },
};
</script>

<style lang="less" scoped>
.course_title {
  width: 100%;
  display: flex;
  height: 40px;
  margin: 20px 0;
  line-height: 40px;
  i {
    height: 40px;
    font-size: 40px;
    width: 40px;
    border: 2px solid red;
  }
  div {
    padding-left: 40px;
    height: 44px;
    flex: 1;
    box-sizing: border-box;
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
  }
}
</style>